import React, { useMemo } from 'react'
import style from './Card.module.scss'
import { useDispatch,useSelector } from 'react-redux'
import type { RootState,AppDispatch } from '../../../../store/index'
const Card:React.FC = () => {
  const cardList = useSelector((state:RootState) => state.goods.cardList)
  const sellerList = useSelector((state:RootState) => state.seller.sellerList)
  const dispatch:AppDispatch = useDispatch()

  const data = useMemo(() =>{
    let total = 0
    let price = 0
    cardList.forEach(v=>{
      total += v.count! 
      price += v.count! * v.price 
    })
    return {
      total,
      price
    }
    // return cardList.reduce((prev,cur) => {
    //   prev.count += cur.count!
    //   prev.price += cur.count! * cur.price
    //   return prev
    // },{count:0,price:0})
  },[cardList])


  return (
    <div className={style.card}>
      <div className={style.left}>
        <div className={style.icon}>
          <i>
            <svg tableValues="1736171908617" className="icon" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5414" width="32" height="32"><path d="M334.366118 602.352941h667.286588L1054.117647 210.823529H248.289882l86.076236 391.529412zM222.117647 150.588235H1054.117647a60.235294 60.235294 0 0 1 59.693177 68.246589l-52.464942 391.529411A60.235294 60.235294 0 0 1 1001.652706 662.588235H336.715294l26.955294 120.470589H933.647059a30.117647 30.117647 0 0 1 0 60.235294H339.516235a30.117647 30.117647 0 0 1-29.394823-23.552L140.167529 60.235294H30.117647a30.117647 30.117647 0 0 1 0-60.235294h134.174118a30.117647 30.117647 0 0 1 29.394823 23.552L222.117647 150.588235zM331.294118 963.764706a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z m0 60.235294a120.470588 120.470588 0 1 1 0-240.941176 120.470588 120.470588 0 0 1 0 240.941176z m602.352941-60.235294a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z m0 60.235294a120.470588 120.470588 0 1 1 0-240.941176 120.470588 120.470588 0 0 1 0 240.941176z" fill="#ffffff" p-id="5415"></path></svg>
          </i>
          <span>{data.total}</span>
        </div>
        <strong>￥{data.price}</strong>
        <span>另需配送费{sellerList?.deliveryPrice}</span>
      </div>
      <div className={style.right}>
          {data.price >= sellerList!.minPrice?<button>去结算</button>:`还差${sellerList!.minPrice - data.price }元起送`}
      </div>
    </div>
  )
}

export default Card